<template>
  <div class="bar-line-echart">
    <div class="bar-line-echart__content" ref="echartRef"></div>
    <div v-if="loading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const echartRef = ref()
const props = defineProps({
  labels: {
    type: Array,
    default: () => {
      return []
    }
  },
  barData: {
    type: Array,
    default: () => {
      return []
    }
  },
  lineData: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
  grid: {
    type: Object,
    default: () => {
      return {
        top: '30px',
        bottom: '50px',
        left: '50px',
        right: '20px'
      }
    }
  },
  axisLabel: {
    type: Object,
    default: () => {
      return {}
    }
  },
  barName: {
    type: String,
    default: ''
  },
  lineName: {
    type: String,
    default: ''
  },
  barWidth: {
    type: Number,
    default: 30
  }
})

// 柱状图基础配置信息
const setBarSeries = () => {
  const defaultBarSeries = {
    name: props.barName,
    type: 'bar',
    data: props.barData?._value || props.barData,
    barWidth: props.barWidth,
    showBackground: false,
    backgroundStyle: {
      color: 'rgba(180, 180, 180, 0.2)'
    },
    // 头部显示数量
    label: {
      show: true,
      position: 'top'
    },
    // 柱子颜色
    itemStyle: {
      borderColor: 'transparent',
      color: 'rgb(63, 150, 165)'
    },
    // 鼠标经过时柱子颜色
    emphasis: {
      itemStyle: {
        borderColor: 'transparent',
        color: 'rgb(127, 255, 0)'
      }
    },
    markLine: {
      silent: false
    }
  }
  return Object.assign(defaultBarSeries, props.barSeries)
}

// 折线图基础配置信息
const setLineSeries = () => {
  const defaultLineSeries = {
    name: props.lineName,
    type: 'line',
    yAxisIndex: 1,
    tooltip: {
      valueFormatter(value) {
        return value
      }
    },
    data: props.lineData?._value || props.lineData
  }
  return Object.assign(defaultLineSeries, props.barSeries)
}

// X轴配置
const setXAxisLabel = () => {
  const defaultAxisLabel = {
    // formatter: '{value}',
    formatter(val) {
      return val
        .replace('有限公司', '')
        .replace('科技公司', '')
        .replace('股份有限公司', '')
        .replace('股份公司', '')
    },
    textStyle: {
      color: '#FFF'
    },
    fontSize: '12',
    rotate: 20
  }
  return Object.assign(defaultAxisLabel, props.xAxisLabel)
}

function draw(rows) {
  let option = {
    // title: {
    //   text: 'ECharts 入门示例'
    // },
    tooltip: {},
    grid: props.grid,
    xAxis: {
      type: 'category',
      splitLine: {
        show: false
      },
      axisTick: {
        // 刻度线
        show: false
      },
      axisLabel: setXAxisLabel(),
      data: props.labels._value || props.labels
    },
    yAxis: [
      {
        type: 'value',
        // name: 'Precipitation',
        // min: 0,
        // max: 250,
        // interval: 50,
        splitLine: {
          // 水平线
          show: false
        },
        axisTick: {
          // 刻度线
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#FFF'
          },
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        // name: 'Temperature',
        // min: 0,
        // max: 25,
        // interval: 5,
        splitLine: {
          // 水平线
          show: false
        },
        axisTick: {
          // 刻度线
          show: false
        },
        textStyle: {
          color: '#FFF'
        },
        axisLabel: {
          formatter: ''
        }
      }
    ],
    series: [setBarSeries(), setLineSeries()]
  }
  if (echartRef.value) {
    let myChart = echarts.init(echartRef.value, 'light', {
      renderer: 'canvas',
      useDirtyRect: false
    })
    myChart.setOption(option)
    setTimeout(myChart.resize, 300)
  }
}

watch(
  () => props.labels,
  (n) => {
    draw()
  },
  { immediate: true }
)
watch(
  () => props.data,
  (n) => {
    draw()
  },
  { immediate: true }
)

onMounted(() => {
  draw()
})
</script>
<style lang="less" scoped>
.bar-line-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .bar-line-echart__content {
    width: 100%;
    height: 100%;
  }
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
